import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { Button } from 'antd';
import './index.less';

const months = _.range(1, 13);
const MonthSelect: React.FC<IMonthSelectProps> = (props) => {
  const onClick = (number: number) => {
    if (props.disabled) {
      return;
    }
    let arr: number[] = [];
    if (props.value && props.value.length > 0) {
      arr = [...props.value];
    }

    if (arr.indexOf(number) > -1) {
      _.remove(arr, (n: number) => n === number);
    } else {
      arr.push(number);
    }
    props.onChange && props.onChange(arr);
  };

  return (
    <div className="month-select">
      {months.map((v: number) => (
        <Button
          key={v}
          className="item"
          type={props.value && props.value.includes(v) ? 'primary' : 'default'}
          onClick={() => onClick(v)}
        >
          {v}
        </Button>
      ))}
    </div>
  );
};

interface IMonthSelectProps {
  value?: number[];
  onChange?: (value: number[]) => void;
  disabled?: boolean;
}

export default MonthSelect;
